<script setup>
import {computed, onMounted, ref} from 'vue'
import {useBackPrevPage} from "@/hooks/useBackPrevPage";

// 返回上一页
const {backPrevPage} = useBackPrevPage();

// 轮播图
const swiperList = ref([
  'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg',
  'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg',
  'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg',
  'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg',
  'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg',
  'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg'
])

const price = ref(2999.99)

// 当前轮播图索引
const currentIndex = ref(0)
// 轮播图切换
const swipeChange = (e) => {
  currentIndex.value = e
}
// 预览图片
const previewImage = () => {
  uni.previewImage({
    current: currentIndex.value,
    urls: swiperList.value,
    indicator: 'number',
    loop: true
  });
}

// 底部高度
const bottomHeight = ref('0px')

onMounted(() => {
  const query = uni.createSelectorQuery().in(this);
  query.select('.van-action-bar').boundingClientRect((res) => {
    console.log(res)
    bottomHeight.value = res.height + 'px'
  }).exec();
});

const backBoxRef = ref()
// 滚动距离
const scrollTop = ref(0)
// 监听滚动事件
const handleScroll = ({detail: {scrollTop: st}}) => {
  scrollTop.value = st
}
// 动态设置透明度
const getBackgroundColor = computed(() => {
  if (scrollTop.value >= 200) {
    return {
      backgroundColor: 'rgb(247, 248, 250)'
    }
  }
  else {
    return {
      backgroundColor: `rgba(247, 248, 250, ${scrollTop.value / 200})`
    }
  }
})
</script>

<template>
  <z-paging safe-area-insert-bottom @scroll="handleScroll">
    <!-- 轮播 -->
    <view class="relative">
      <van-swipe @change="swipeChange">
        <van-swipe-item
            v-for="(swiper) in swiperList"
            @click="previewImage"
        >
          <image
              :src="swiper"
              mode="aspectFill"
              class="full-image"
          />
        </van-swipe-item>
        <template #indicator="{ active, total }">
          <view class="custom-indicator absolute p-lr-15 p-tb-5 fs-24 c-f br-30">
            {{ active + 1 }} / {{ total }}
          </view>
        </template>
      </van-swipe>

      <!-- 返回上一页 -->
      <view class="back-box fixed top-0 p-30 w-100" :style="getBackgroundColor">
        <view
            class="back flex-center"
            @click="backPrevPage"
        >
          <van-icon
              name="arrow-left"
              color="#fff"
              size="30rpx"
          />
        </view>
      </view>
    </view>

    <!-- 价格信息 -->
    <view class="goods-info c-f relative flex-between p-lr-30">
      <!-- 背景图 -->
      <image
          src="/static/images/common/price-banner.png"
          mode="aspectFill"
          class="absolute-image"
      />
      <!-- 价格 -->
      <view class="f-col-between fs-24">
        <!-- 现价 -->
        <view class="flex-center m-b-10">
          <CustomAmount
              :price="price"
              :isWhite="true"
          />
          <view class="vip-price m-l-15">VIP到手价</view>
        </view>
        <!-- 原价 -->
        <view class="flex align-center">
          <text class="fs-20">原价</text>
          <CustomAmount
              :price="price"
              :isWhite="true"
              type="original"
          />
        </view>
      </view>

      <!-- 销量 -->
      <view class="fs-26 flex-center">
        <view class="icon-fire icon icon-huo-copy"></view>
        <view class="m-l-10">热销
          <text class="sale">38475</text>
          件
        </view>
      </view>
    </view>

    <!-- name & tag -->
    <view class="p-30 white-bgc">
      <van-tag color="#1a1617">品牌</van-tag>
      <!-- 商品名称 -->
      <van-text-ellipsis
          rows="2"
          content="Apple iPhone 14 Pro Max 正品国行苹果手机，一年质保，只换不修。质量杠杠滴"
          expand-text="展开"
          collapse-text="收起"
      />
      <!-- 标签 -->
      <view class="tag-box m-t-5">
        <van-tag color="#7232dd">正品保障</van-tag>
        <van-tag color="#7232dd">官方质保</van-tag>
        <van-tag color="#7232dd">7天无理由退换货</van-tag>
        <van-tag color="#7232dd">30天价保</van-tag>
        <van-tag color="#7232dd">热销榜第1名</van-tag>
        <van-tag color="#7232dd">热销榜第1名</van-tag>
      </view>
    </view>

    <!-- 评价 -->
    <view class="p-30 white-bgc m-t-10">
      <view class="title flex-between">
        <text class="tb c-3 fs-26">评价（1000）</text>
        <view class="c-6 fs-24">
          <text class="m-r-5">查看全部</text>
          <van-icon
              name="arrow"
              color="#666"
          />
        </view>
      </view>
      <!-- 内容 -->
      <view
          class="comment-box flex m-t-30 p-b-15"
          v-for="(index, item) in 2"
          :key="index"
      >
        <!-- 头像 -->
        <view class="avatar-box">
          <image
              src="/static/images/user/avatar.png"
              mode="widthFix"
              class="avatar"
          />
        </view>
        <!-- 评价内容 -->
        <view class="f-col fs-24 flex-1 m-lr-20 c-3">
          <view class="nickname tb">Ning Che</view>
          <view class="comment m-t-10">
            商品质量很好，包装也很严实，很满意。
          </view>
        </view>
        <!-- 评论图片 -->
        <view class="comment-image-box">
          <image
              src="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
              mode="widthFix"
              class="br-10"
          />
        </view>
      </view>
    </view>

    <!-- 店铺信息 -->
    <view class="shop-info m-t-10 white-bgc p-30 flex">
      <!-- 店铺图片 -->
      <view class="shop-image">
        <image
            src="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
            mode="widthFix"
            class="br-10"
        >
        </image>
      </view>
      <!-- 店铺信息 -->
      <view class="info-box m-l-30">
        <view class="title tb c-3s fs-26">
          <text class="m-r-10">Apple官方旗舰店</text>
          <van-icon name="arrow" color="#333"/>
        </view>
        <!-- 店铺评分 -->
        <view class="m-t-20">
          <van-rate
              size="28rpx"
              color="#f8d64b"
              void-color="#f8d64b"
              icon="star"
          />
        </view>
      </view>
    </view>

    <!-- 商品详情 -->
    <view class="goods-detail m-t-10 white-bgc">
      <view class="tb c-3 fs-26 p-30">商品详情</view>
      <view v-for="(index, item) in 3"
            :key="index">
        <image
            :src="`/static/images/goods/goods-detail-${index}.jpg`"
            mode="widthFix"
            class="w-100"
        >
        </image>
      </view>
    </view>

    <!-- 填充塌陷高度 -->
    <view class="insert-bottom"></view>

    <!-- 底部动作栏 -->
    <template #bottom>
      <van-action-bar>
        <van-action-bar-icon
            icon="chat-o"
            text="客服"
        />
        <van-action-bar-icon
            icon="cart-o"
            text="购物车"
        />
        <van-action-bar-icon
            icon="shop-o"
            text="店铺"
        />
        <van-action-bar-button
            color="#6C6C6C"
            type="warning"
            text="加入购物车"
        />
        <van-action-bar-button
            color="#1A1617"
            type="danger"
            text="立即购买"
        />
      </van-action-bar>
    </template>
  </z-paging>
</template>

<style scoped lang="scss">
.van-swipe-item {
  height: 750rpx;
  aspect-ratio: 1/1;
}

.custom-indicator {
  bottom: 20rpx;
  right: 20rpx;
}

.back-box {
  z-index: 999;
  box-sizing: border-box;

  .back {
    z-index: 998;
    background-color: rgba(0, 0, 0, .3);
    border-radius: 50%;
    width: 50rpx;
    height: 50rpx;
  }

}

.goods-info {
  height: 120rpx;

  .sale {
    font-family: 'WeChatSans Std', serif;
  }

  .icon-fire {
    height: 32rpx;
    width: 32rpx;
  }
}

.vip-price {
  font-size: 22rpx;
  background-color: #bda476;
  border-radius: 5rpx;
  padding: 3rpx 10rpx;
}

.van-tag {
  margin-right: 10rpx;
}

.van-text-ellipsis {
  display: contents;
  font-size: 26rpx;
  font-weight: 600;
}

.van-action-bar {
  border-top: 1rpx solid #f0f0f0;
}

.tag-box {
  overflow-x: scroll;
  /* 或 auto */
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE/Edge */
  white-space: nowrap;
  /* 防止换行 */
}

.tag-box::-webkit-scrollbar {
  display: none;
}

.comment-box {
  border-bottom: 1rpx solid #f0f0f0;

  &:last-child {
    border-bottom: none;
  }

  .avatar-box {
    width: 50rpx;

    image {
      width: 50rpx;
      aspect-ratio: 1/1;
    }
  }

  .comment-image-box {
    width: 150rpx;

    image {
      width: 150rpx;
      aspect-ratio: 1/1;
    }
  }
}

.insert-bottom {
  height: v-bind(bottomHeight);
}

.shop-info {
  .shop-image {
    image {
      width: 100rpx;
      aspect-ratio: 1/1;
    }
  }
}

.goods-detail {
  // 去除图片之间的间距
  image {
    display: block;
  }
}
</style>